HTML Dialog Model for Accessable Tooltips, Pop-ups, and More

Open and close

const dialog = document.querySelector("dialog")

dialog.show() // Opens a non-modal dialog
dialog.showModal() // Opens a modal

dialog.close() // Closes the dialog

Style tooltip

dialog {
  z-index: 10;
  margin-top: 10px;
  background: green;
  border: none;
  border-radius: 1rem;
}

Style Backdrop

dialog::backdrop {
  background-color: hsl(250, 100%, 50%, 0.25);
}

Pop up Form

<dialog>
  <form>
    <input type="text" />
    <button formmethod="dialog" type="submit">Cancel</button>
    <button type="submit">Submit</button>
  </form>
</dialog>

Close Box if user clicks outside of Element

const dialog = document.querySelector("dialog") 

dialog.addEventListener("click", e => {
  const dialogDimensions = dialog.getBoundingClientRect()
  if (
    e.clientX < dialogDimensions.left ||
    e.clientX > dialogDimensions.right ||
    e.clientY < dialogDimensions.top ||
    e.clientY > dialogDimensions.bottom
  ) {
    dialog.close()
  }
})

Credits